import React from 'react'
import { Form, Input, Button, Card, Icon, Row, Col, Select, message, Radio } from 'antd'
import auth from '../../services/auth'
import { fetchPost, getCaptcha } from '../../utils/request'
import { history } from '../../utils/config'
import Styles from './Index.less'
import loginTitle from '../../assets/loginTitle.png'

const FormItem = Form.Item
const Option = Select.Option

class Login extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      msgText: 'Send OTP',
      countFlag: true,
      count: 60,
      accountList: [],
      loginType: null,
    }
  }

  componentWillUnmount () {
    this.timer && clearTimeout(this.timer)
  }

  handleSubmit (e) {
    e.preventDefault()
    let { account, accountNew, verifyCode } = this.props.form.getFieldsValue()
    if (accountNew) {
      account = accountNew
    }
    this.props.form.validateFields((err, values) => {
      if (!err) {
        auth.login(account, verifyCode, (loggedIn) => {
          if (loggedIn) {
            history.push('/homePage')
          }
        })
      }
    })
  }

  getCaptcha (e) {
    e.preventDefault()
    let { account, accountNew } = this.props.form.getFieldsValue()
    if (!this.state.countFlag) {
      return false
    }
    if (accountNew) {
      account = accountNew
    }

    if (!account) {
      message.error('Please select your account')
      return false
    }

    getCaptcha(`/admin/${account}/sendVerifyCode`).then(res => {
      //   debugger;
      if (res.code == 0) {
        console.log(res, 'res')
        this.state.countFlag = false
        this.timer = setInterval(() => {
          if (this.state.count <= 0) {
            clearInterval(this.timer)
            this.state.countFlag = true
            this.state.count = 60
            this.setState({
              // time: 60,
              msgText: 'Send OTP',
              countFlag: true
              // countFlag: true
            })
          } else {
            this.state.count--
            this.setState({
              msgText: `${this.state.count} s`
            })
          }
        }, 1000)
      }

    })
  }

  getAccount (e) {
    let mobile = e.target.value
    if (mobile && mobile.length >= 10) {
      fetchPost(`/admin/account/list`, { mobile: mobile }).then(json => {
        if (json.data != null && json.code === 0) {
          if (json.data.accountList && json.data.accountList.length > 0) {
            this.setState({
              accountList: json.data.accountList
            })
          } else {
            this.setState({
              accountList: []
            })
            message.error('No account')
          }
        } else {
          this.setState({
            accountList: []
          })
        }
      })
    }
  }

  changeLoginMode (e) {
    let loginType = e.target.value
    this.setState({
      loginType: loginType
    })
  }

  render () {
    const { getFieldDecorator } = this.props.form

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 }
    }

    return (
      <div className={Styles.baseColor}>
        <div className={Styles.backgroundWrapper}>
          <div className={Styles.titleWrapper}>
            {/*<img src={loginTitle} style={{marginBottom: 80}}/>*/}
            <div className={Styles.loginWrapper}>
              <Card noHovering={true} style={{ borderRadius: 6 }}>
                <Form
                  style={{ width: 300, margin: 'auto' }}
                  onSubmit={e => this.handleSubmit(e)}
                  className='login-form'
                >
                  <FormItem style={{ marginTop: 30 }}>
                    <div
                      style={{
                        fontSize: 16,
                        textAlign: 'center',
                        color: '#606060'
                      }}
                    >Account Login
                    </div>
                  </FormItem>


                  <FormItem>
                    {getFieldDecorator('account', {
                      rules: [
                        { required: true, message: 'Enter your account' }
                      ]
                    })(
                        <Input prefix={<Icon type='user' style={{ fontSize: 13 }}/>}
                               placeholder='Enter your account'/>
                    )}
                  </FormItem>

                  <FormItem
                  >
                        {getFieldDecorator('verifyCode', {
                          rules: [{ required: true, message: 'Enter OTP' }],
                        })(
                          <Input type='password' size="large" placeholder="Enter OTP"/>
                        )}
                  </FormItem>
                  <Button style={{ width: '100%', height: 46, marginBottom: 80, fontSize: 16 }} type='primary'
                          htmlType='submit'>Login</Button>
                </Form>
              </Card>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Login = Form.create()(Login)

export default Login
